<template>
    <div class="home">
        <div class="searchBox" :style="{'background-color':isTop ? backgroud :'#fff'}">
            <div class="user" @click="gotoUse">
                 <div class="text" :style="{color}" v-if="!isLogin" @click="toLogin">登录</div>
                <van-icon v-else name="manager-o" @click="toShow" :color="color" />
            </div>
            <!-- <van-icon name="manager" /> -->
            <div class="search" :style="{'background-color':isTop ? backgroud :'#fff'}" @click="toSearch">
                <van-notice-bar :color="color" background="rgba(0, 0, 0, 0.1)" left-icon="search" :scrollable="false">
                    <van-swipe
                        vertical
                        class="notice-swipe"
                        :autoplay="3000"
                        :show-indicators="false"
                        @change="onChange"
                    >
                        <van-swipe-item v-for="(item,i) in searchData" :key="i">{{item.title}}</van-swipe-item>
                    </van-swipe>
                </van-notice-bar>
            </div>
            <div class="fenlei" @click="gotoFei">
                <van-icon name="bars" :color="color" />
            </div>
        </div>
        <!-- <div class="tab" :style="{'background-color':backgroud}"> -->
            <van-tabs v-model="active"
             animated 
             @click="onClick"
             :title-inactive-color="isTop ? color : ''"
             :title-active-color ="isTop ? color : ''"
             :background="isTop ? backgroud :'#fff'">
                <van-tab title="热门">
                    <hot></hot>
                </van-tab>
                <van-tab title="推荐">
                    <recommend ></recommend>
                </van-tab>
                <van-tab title="男生">
                    <boy/>
                </van-tab>
                <van-tab title="女生">
                    <girl/>
                </van-tab>
            </van-tabs>
        <!-- </div> -->
        <van-popup v-model="isShow" round :style="{width: '50%',height: '38%'}" >
                <div class="userBox">
                    <div class="name">账号：{{zh}}</div>
                    <div class="zhui" @click="binzhui">追漫</div>
                    <div class="lishi" @click="binlishi">历史记录</div>
                    <div class="lishi" @click="binCookie">退出登录</div>
                </div>
        </van-popup>
    </div>
</template>

<script>
    import recommend from '@/views/Recommend.vue'
    import boy from '@/views/BoyView.vue'
    import girl from '@/views/Girl.vue'
    import hot from '@/views/Hot.vue'
    import store from '@/store';
    export default {
        name:'home',
        components:{
            recommend,
            boy,
            girl,
            hot
        },
        data() {
            return {
                active: 1,
                // 搜索框内容
                searchData:[],
                // 搜索框下标
                searchId:0,
                isLogin:false,
                isShow:false,
                zh:''
            };
        },
        computed:{
            backgroud(){
                return store.state.header.backgroundColor
            },
            color(){
                return store.state.header.color
            },
            isTop(){
                return store.state.header.isTop
            },
        },
        created(){
            this.axios({
                method: 'get',
                url: 'SearchRecommend',
                params: {
                    num: 3
                }
            }).then((res)=>{
                if (res.status === 200) {
                    this.searchData = res.data.data
                }
            }).catch(err =>{
                
            })

            if (this.getCookie('login') === 'true') {
            this.isLogin = true
            }
            this.zh = this.getCookie('phone')
        },
        methods:{
            toShow(){
            this.isShow = true
            },
            binzhui(){
                this.$router.push({ name: 'Zhui'})
            },
            binlishi(){
                this.$router.push({ name: 'History'})
            },
            toLogin(){
              this.$router.push({ name: 'login'})
            },
            onChange(index) {
            this.searchId = index;
            },
            toSearch(){
                this.$router.push({name:'search',query:{title:this.searchData[this.searchId].title}})
            },
            onClick(name){
                if(name!=1){
                    store.commit('setIsTop',false)
                }else{
                    store.commit('setIsTop',true)
                }
            },
            getCookie(cookie_name) {
                var allcookies = document.cookie;
                //索引长度，开始索引的位置
                var cookie_pos = allcookies.indexOf(cookie_name);

                // 如果找到了索引，就代表cookie存在,否则不存在
                if (cookie_pos != -1) {
                    // 把cookie_pos放在值的开始，只要给值加1即可
                    //计算取cookie值得开始索引，加的1为“=”
                    cookie_pos = cookie_pos + cookie_name.length + 1; 
                    //计算取cookie值得结束索引
                    var cookie_end = allcookies.indexOf(";", cookie_pos);
                    
                    if (cookie_end == -1) {
                        cookie_end = allcookies.length;

                    }
                    //得到想要的cookie的值
                    var value = unescape(allcookies.substring(cookie_pos, cookie_end)); 
                }
                return value;
            },

            // 跳转分类
            gotoFei(){
                this.$router.push({name:"Filte"})
            },

            // 跳转用户
            gotoUse(){
                // this.$router.push({name:"Login1"})
            },
            binCookie(){
            let time = new Date().getTime() - 1000*60*60*24
            let g = new Date(time).toUTCString()
            document.cookie = `login = false;expires=` + g;
            document.cookie = `phone = ${this.getCookie('phone')};expires=` + g;
            
            this.isLogin=false
            this.isShow=false
            },
            
        },
        activated() {
            if (this.getCookie('login') === 'true') {
            this.isLogin = true
            }
            this.zh = this.getCookie('phone')
        },
    }
</script>

<style lang="less" scoped>
    .userBox{
        padding-top: 1px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        div{
            text-align: center;
        }
        .name,.zhui,.lishi{
            margin: 0 auto;
            margin-top: 20px;
            width: 60%;
            line-height: 25px;
            text-align: center;

        }
        .zhui,.lishi{
            border-radius: 25px;
            outline: 1px solid rgb(204, 204, 204);
        }
        }
    /deep/.van-tab--active{
        font-weight: 800;
        font-size: 16px;
    }
    /deep/.van-tabs__nav--line{
        transition: background-color .5s;
    }
    .home{
        .searchBox{
            width: 100%;
            display: flex;
            padding: 10px 0;
            transition: background-color .5s;
            .user{
                width: 30px;
                height: 30px;
                font-size: 20px;
                line-height: 30px;
                text-align: center;
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 50%;
                margin: 0 10px;
                .text{
                font-size: 12px;
                line-height: 30px;
                }
            }
            .search{
                flex: 1;
                height: 30px;
                transition: background-color .5s;
                .van-notice-bar{
                    height: 100%;
                    border-radius: 30px;
                    padding: 0 5px;
                }
            }
            .fenlei{
                width: 30px;
                height: 30px;
                font-size: 20px;
                line-height: 30px;
                text-align: center;
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 50%;
                margin: 0 10px;
            }
        }
        /deep/.van-tabs__line{
         opacity: 0;
        }
        /deep/.van-tab{
            font-size: 16px;
            color: rgb(102, 102, 102);
        }
        /deep/.van-tab--active{
            font-size: 18px;
            color: rgb(43, 43, 43);
        }
        .tab{
            transition: background-color .5s;
        }
    }
    .notice-swipe {
    height: 30px;
    line-height: 30px;
    }
</style>